if ('documentPictureInPicture' in window) {
  console.log('🚀 浏览器支持 PiP 功能！')
} else {
  console.warn('⚠️ 当前浏览器不支持 PiP 功能，更新浏览器或者换台电脑吧！')
}

export async function setMiniWindow(
  pipContent: HTMLElement,
  config: { width: number; height: number },
) {
  // 请求创建一个 PiP 窗口
  const pipWindow = await window.documentPictureInPicture.requestWindow(config)

  addDocumentStyle(pipWindow)

  // 将元素添加到 PiP 窗口中
  pipWindow.document.body.appendChild(pipContent.cloneNode(true))
}

function addDocumentStyle(pipWindow: Window) {
  ;[...document.styleSheets].forEach((styleSheet) => {
    try {
      // 转成字符串方便赋值
      const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join('')
      // 创建style标签
      const style = document.createElement('style')
      // 设置为之前页面中的css信息
      style.textContent = cssRules
      // 把style标签放到画中画的<head><head/>标签中
      pipWindow.document.head.appendChild(style)
    } catch (e) {
      // 通过 link 引入样式，如果有跨域，访问styleSheet.cssRules时会报错。没有跨域则不会报错
      const link = document.createElement('link')
      /**
       * rel = stylesheet 导入样式表
       * type: 对应的格式
       * media: 媒体查询（如 screen and (max-width: 600px)）
       *  href: 外部样式表的 URL
       */
      link.rel = 'stylesheet'
      link.type = styleSheet.type
      link.media = styleSheet.media
      link.href = styleSheet.href ?? ''
      console.log('error: link', link)
      pipWindow.document.head.appendChild(link)
    }
  })
}
